<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/distpicker.js"></script>
    <script src="/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <table class="table table-hover">
        <thead class="table-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">房屋名称</th>
            <th scope="col">招募信息</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody th:each="o,i :${session.orderpage.getList()}">
        <tr>
            <th scope="row" th:text="${i.index}"></th>
            <td th:text="${session.orderhousename.get(i.index)}"></td>
            <td th:text="${o.orderdescription}"></td>
            <td>
                <a class="btn btn-outline-warning" th:onclick="loadHouseDetail([[${o.houseid}]])">查看房屋</a>
                <a class="btn btn-outline-primary" th:onclick="deleteOrder([[${o.orderid}]])">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-6 ">
            <nav aria-label="Page navigation example">
                <ul class="pagination btn-lg">
                    <li class="page-item">
                        <a class="page-link btn-outline-primary" href="#" aria-label="Previous"
                           th:class="!${session.orderpage.hasPreviousPage}? 'page-link btn disabled':'page-link' "
                           th:onclick="loadNewPageForUserOrders([[${session.orderpage.prePage}]])">
                            <span aria-hidden="true">上一页</span>
                        </a>
                    </li>
                    <li th:class="${i}==${session.orderpage.pageNum}?'page-item active ':'page-item' " th:each="i : ${session.orderpage.navigatepageNums}" >
                        <a class="page-link"
                           th:onclick="loadNewPageForUserOrders([[${i}]])">[[${i}]]</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next"
                           th:class="!${session.orderpage.hasNextPage}? 'page-link btn disabled':'page-link' "
                           th:onclick="loadNewPageForUserOrders([[${session.orderpage.nextPage}]])">
                            <span aria-hidden="true">下一页</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
<script>
    function loadHouseDetail(houseid) {
        $.ajax({
            url: '/house/to_houseDetail',
            type: 'get',
            data: {"houseid": houseid},
            async: true,
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success: function (html) {
                $('#allItems').html(html);
                loadComments();
            },
            error: function () {
                alert("请求错误！！");
            }
        })
    }

    function deleteOrder(orderid) {
        $.ajax({
            url: '/order/removeOrder',
            type: 'GET',
            data: {"orderid": orderid},
            async: true,
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success: function () {
                loadPage('/order/getUserOrders');
            },
            error: function () {
                alert("请求错误！！");
            }
        })
    }

    function loadPage(url) {
        $.ajax({
            type: "GET",
            url: url,
            async: true,
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success: function (html) {
                $("#allItems").html(html);
            },
            error: function () {
                alert("请求错误！！");
            }
        })
    }
    function loadNewPageForUserOrders(pageNo) {
        $.ajax({
            url: '/order/getUserOrders',
            type: 'GET',
            async: true,
            data: {"pageNo": pageNo,"flag": 1},
            success: function (data) {
                $('#allItems').html(data);
            },
            error: function () {
                alert("请求错误！！");
            }
        })
    }
    function loadComments() {
        $.ajax({
            url:'/comment/getHouseComments',
            type:'GET',
            async:true,
            dataType: "html",
            contentType: 'application/json; charset=utf-8',
            success:function (html) {
                $('#houseCommentInfo').html(html);
            }
        })
    }
</script>
</html>